import React from "react"

export default class LoadMore extends React.Component{


  componentDidMount () {
    const wrap = this.refs.wrap;
    // let n = 0;
    window.addEventListener('scroll',function () {
      let screenHeight = document.documentElement.clientHeight   //获取当前浏览器视口高度
      let loadToTopHeight = wrap.getBoundingClientRect().top;  //获取加载更多到视口顶部的距离
      // console.log('screenHeight',screenHeight)
      // console.log('loadToTopHeight',loadToTopHeight)
      if(loadToTopHeight === 0){
        loadToTopHeight = screenHeight;  
      }      //这个if条件是为了解决从其他页面跳到无限加载的页面时，滚动条一触发就不断的加载数据渲染页面的bug，
             // 具体原因是loadToTopHeight的大小为0造成的，但具体为什么是0，原因不知，还在查找中
      if(loadToTopHeight<screenHeight){
        if(this.props.isLoading){
          return;
        }
        this.props.loadMoreFunc()
      }
    }.bind(this))
  }

  render () {
    return (
      <div ref="wrap">加载更多......</div>
    )
  }
}